import React from  'react'
import { Table,Modal,message,Button,Card,Form ,Input,DatePicker } from 'antd'
import axios from "../../../axios/axios";
import Utils from './../../../utils/utils'

import './../../../style/common.less'

export default class User extends React.Component{

    state={
        dataSource:[]
    }

    params = {
        page:1,
        limit:5
    }
    componentWillMount(){
        this.requestList()
    }

    handleDelete = () => {
        let rows = this.state.selectedRows
        let ids = []
        rows.map((item) => {
            ids.push(item.id)
        })
        Modal.confirm({
            title:'删除提示',
            content:`删除的id集合:${ids.join(',')}`,
            onOk:() => {
                message.success('删除成功!')
                this.request()
            },
            onCancel:() => {
                message.info('取消删除')
            },
            okText:'确认',
            cancelText:'取消'
        })
    }

    //查询提交
    filterSubmit = ()=>{
        this.requestList()
    }

    requestList = () => {
        let _this = this
        axios.ajax2({
            url:'/user/page',
            method:'get',
            data:{
                params:{
                    page:this.params.page,
                    limit:5
                }
            }
        }).then((res) => {
            if (res.status === 200){
                // antd table 需要 key 没有会报错，那无影响
                res.data.rows.map((item,index) => {
                    item.key = index
                })
                this.setState({
                    dataSource:res.data.rows,
                    selectedRowKeys:[],
                    selectedRows:null,
                    pagination:Utils.pagination(res,(current) => {
                        _this.params.page = current
                        _this.request()
                    })
                })
            }
        })
    }

    render(){
        const selectedRowKeys = this.state.selectedRowKeys
        const rowCheckSelection = {
            type: 'checkbox',
            selectedRowKeys,
            // 单选框也可以用onChange onRow 适合单选
            onChange:(selectedRowKeys,selectedRows)=>{
                this.setState({
                    selectedRowKeys,
                    selectedRows
                })
            }
        }
        const columns=[
            {
                title:'id',
                dataIndex:'id'
            },
            {
                title: '用户名',
                dataIndex: 'username'
            },
            {
                title:'密码',
                dataIndex:'password',
                render:(text, record, index) => {
                    return '******'
                }
            },
            {
                title: '创建时间 ',
                dataIndex: 'createdatetime',
                render:Utils.formatDate
            },
            {
                title: '修改时间 ',
                dataIndex: 'modifydatetime',
                render:Utils.formatDate
            }
        ]

        return (
            <div>
                <Card>
                    <FilterForm filterSubmit={ this.filterSubmit } params={ this.params }/>
                </Card>


                <Card style={{marginTop:10}}>
                    <Button type="danger" onClick={this.handleDelete}>删除</Button>
                </Card>

            <Table className="content-wrap"
                bordered
                rowSelection={rowCheckSelection}
                columns={columns}
                dataSource={this.state.dataSource}
                pagination={this.state.pagination}
            />

            </div>
        )
    }
}


class FilterForm extends React.Component{

    handleFilterSubmit = () =>{
        let fieldsValue=this.props.form.getFieldsValue()
        // console.log(this.props.params)

        this.props.filterSubmit()

    }
    reset = () => {
        this.props.form.resetFields();
    }

    render(){
        // Form.Item 通用样式
        const formItemLayout = {
            labelCol: {
                span: 5
            },
            wrapperCol: {
                span: 19
            }
        }
        const { getFieldDecorator } = this.props.form
        return (
            <Form layout="inline">
                <div>
                    <Form.Item label="用户名:">
                        {
                            getFieldDecorator('username')(
                                <Input />
                            )
                        }
                    </Form.Item>
                    <Form.Item>
                        {
                            getFieldDecorator('createdatetimeStart')(
                                <DatePicker placeholder="选择开始时间" showTime={true} format="YYYY-MM-DD HH:mm:ss"/>
                            )
                        }
                    </Form.Item>
                    <Form.Item>
                        {
                            getFieldDecorator('createdatetimeEnd')(
                                <DatePicker placeholder="选择结束时间" showTime={true} format="YYYY-MM-DD HH:mm:ss"/>
                            )
                        }
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary"  onClick={this.handleFilterSubmit}>查询</Button>
                        <Button type="ghost" onClick={this.reset }>重置</Button>
                    </Form.Item>
                </div>
            </Form>
        )
    }

}
FilterForm = Form.create({})(FilterForm);